<!-- 封装组件说明：当页面需要返回的上一页或首页的，styleData.show设置为true，反之则自定义。
当某些页面导航栏名称时，则设置styleData.tabbarText。插槽slot的作用是自定义样式 -->
<template>
  <view>
  <!-- <view
      class="navbar"
      :style="{
        paddingTop: safeArea.top + 'px',
        'background-color': styleData.background,
                          }"
                          :class="styleData.show ? 'show' : ''"> -->
    <view class="navbar" :style="{
      'padding-top': statusBarHeight + 'px',
      'background-color': styleData.background,
    }" :class="styleData.show ? 'show' : ''">
      <view v-if="styleData.show" class="tabbarTop">
        <view class="left">
          <view class="l_back" @click="handleBack">
            <image src="@/static/images/recruit/tabarTopIcon.png" mode="scaleToFill" />
          </view>
          <view class="l_home" @click="returnHome">
            <image src="@/static/images/recruit/tabarTopIcon1.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="center">{{ styleData.tabbarText }}</view>
      </view>

      <view class="sub-title" :style="{ color: styleData.TextColor, background: styleData.backgroundColor }" v-else>
        {{ styleData.tabbarText ? styleData.tabbarText : "" }}
        <slot></slot>
      </view>
    </view>
    <view :style="{ paddingTop: `calc(${barTop}px + 80rpx)` }"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    styleData: {
      type: Object,
      default: null,
    },
  },
  computed: {
    ...mapState(["safeArea", "capsule"]),
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        success: () => {
          delta: 1;
        },

        fail: () => {
          uni.switchTab({
            url: "/pages/tabbarChange/firstPage/index",
          });
        },
      });
    },

    returnHome() {
      uni.switchTab({
        url: "/pages/tabbarChange/firstPage/index",
      });
    },
    // 获取胶囊高度
    getHeightFun() {
      this.barTop = wx.getSystemInfoSync().statusBarHeight
      // 获取胶囊按钮位置信息
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
      // 获取导航栏高度
      this.barHeight = menuButtonInfo.height + (menuButtonInfo.top - this.barTop) * 2
    },
  },
  data() {
    return {
      statusBarHeight: 0,
      isShareEnter: false, // 是否是通过分享进入的页面
      barHeight: 0,
      barTop: 0
    };
  },
  created() {
    let pages = getCurrentPages(); // 获取当前页面栈的实例
    this.isShareEnter = pages.length > 1 ? false : true;
    // console.log(pages);
    let barHeight = uni.getSystemInfoSync().statusBarHeight;
    this.statusBarHeight = barHeight === 0 ? 15 : barHeight;
    console.log(this.statusBarHeight);
  },
  mounted() {
    this.getHeightFun()
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  padding: 0;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .sub-title {
    width: 100%;
    text-align: center;
    line-height: 80rpx;
    opacity: 0.88;
    font-size: 34rpx;
    font-weight: 500;
    height: 80rpx;
  }
}

.tabbarTop {
  display: flex;
  width: 100%;
  height: 80rpx;
  align-items: center;
  position: relative;

  .left {
    width: 136rpx;
    height: 64rpx;
    border: 1px solid #e7e7e7;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 32rpx;
    position: relative;

    >view {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;

      >image {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .l_back::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 30rpx;
      background-color: #e7e7e7;
    }
  }

  .center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.show {
  background: #fff;
}
</style>
